<template>
  <div class="app-container">
    <ProTable
      :columns.sync="columns"
      :showSearch.sync="showSearch"
      :getList="getList"
      :loading="loading"
      :resetQuery="resetQuery"
      :tableData="tableData"
    >
      <template #pagination>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
      <template #form>
        <el-form v-show="showSearch" @submit.native.prevent :model="queryParams" ref="queryForm" size="small" inline>
          <el-row>
            <el-form-item prop="skuNo">
              <el-input clearable v-model="queryParams.skuNo" :placeholder="$t('sku')" @keyup.enter.native="getList" />
            </el-form-item>
            <el-form-item prop="status">
              <el-select v-model="queryParams.status" :placeholder="$t('状态')" clearable filterable @change="getList">
                <el-option :label="$t('待完成')" :value="1" />
                <el-option :label="$t('部分完成')" :value="2" />
                <el-option :label="$t('完成')" :value="3" />
                <el-option :label="$t('取消')" :value="4" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #skuNo="{ row }">
        <div @click="handleEdits(row)" style="cursor: pointer; color: #1890ff">
          {{ row.skuNo }}
        </div>
      </template>
      <template #status="{ row }">
        <!-- <!~~  1-待完成 2-部分完成 3-完成 ~~> -->
        <div v-if="row.status == 1" :style="{ color: $randomColor(row.status) }">{{ $t('待完成') }}</div>
        <div v-if="row.status == 2" :style="{ color: $randomColor(row.status) }">{{ $t('部分完成') }}</div>
        <div v-if="row.status == 3" :style="{ color: $randomColor(row.status) }">{{ $t('完成') }}</div>
        <div v-if="row.status == 4" :style="{ color: $randomColor(row.status) }">{{ $t('取消') }}</div>
      </template>
      <template #option="{ row }">
        <el-button
          v-hasPermi="['distribution:skuCloudReservation:cancelReservation']"
          type="text"
          :disabled="row.status != 1"
          @click="handleCancel(row)"
        >
          {{ $t('取消预约') }}
        </el-button>
      </template>
    </ProTable>
    <Skucontmoduler @relaod="getList" :isShowAll="false" ref="Skucontmoduler"></Skucontmoduler>
  </div>
</template>

<script>
import { skuCloudReservationList, cancelReservation } from '@/api/distribution/sku/skuCloudReservation'

export default {
  components: {},
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'SkuCloudReservation',
  data() {
    return {
      /**@type {ProTableColumns}*/
      columns: [
        {
          label: this.$t('sku编号'),
          prop: 'skuNo',
          useSlot: true,
        },
        { label: this.$t('商家名称'), prop: 'distrName' },
        {
          label: this.$t('预约时价格'),
          prop: 'applyPrice',
          // formatter: (applyPrice) => this.$thousand(applyPrice),
          formatter: this.$thousand,
        },
        { label: this.$t('预约数量'), prop: 'applyNum' },
        { label: this.$t('完成数量'), prop: 'completeNum' },
        { label: this.$t('预约状态'), prop: 'status', useSlot: true },
        { label: this.$t('备注'), prop: 'remark' },
        { label: this.$t('操作'), useSlot: true, prop: 'option' },
      ],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      tableData: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        createTime: '',
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleCancel(row) {
      this.$confirm(this.$t('确认取消?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        const data = {
          id: row.id,
        }
        cancelReservation(data).then((res) => {
          const { code, data, msg } = res
          if (code === 200) {
            this.$message({ type: 'success', message: msg })
            this.getList()
          }
        })
      })
    },
    handleEdits(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformationSeller')
    },
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    getList() {
      this.loading = true
      skuCloudReservationList(this.queryParams).then((response) => {
        this.tableData = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
    },
  },
}
</script>
